<template>
	<view class="box padding-l-r-30">
		<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm" labelWidth='80'>
			<u-form-item label="姓名" prop="userInfo.name" borderBottom>
				<u--input v-model="model.userInfo.name" border="none" placeholder='请输入姓名'></u--input>
			</u-form-item>
            <u-form-item label="头像" prop="userInfo.name" borderBottom @click="goCropper">
               <view v-if="model.userInfo.avatar" class="avatar-box">
                   <image :src="model.userInfo.avatar" mode="aspectFill"></image>
               </view>
                <view v-else style="width: 100%;">
                    <u--input disabled placeholder="请选择头像"  border="none"></u--input>
                </view>
                <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
			<u-form-item label="联系方式" prop="userInfo.contact" borderBottom>
				<u--input type='number' v-model="model.userInfo.contact" border="none" placeholder='请输入联系方式'></u--input>
			</u-form-item>
			<u-form-item label="性别" prop="userInfo.gender" borderBottom>
				<u-radio-group v-model="model.userInfo.gender" placement="row" @change="groupChange">
					<u-radio :customStyle="{marginRight: '80rpx'}" v-for="(item, index) in sexlist" :key="index"
						:label="item.name" :name="item.id">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="年龄" prop="userInfo.age" borderBottom>
				<u--input type='number' v-model="model.userInfo.age" border="none" placeholder='请输入年龄'></u--input>
			</u-form-item>
			<u-form-item label="身份证号" prop="userInfo.card" borderBottom>
				<u--input type='text' v-model="model.userInfo.card" border="none" placeholder='请输入身份证号'></u--input>
			</u-form-item>
			<u-form-item label="关系" prop="userInfo.relation" borderBottom @click="relationShow = true; "
				>
				<u--input v-model="model.userInfo.relation" disabled placeholder="请选择关系"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="居住区域" prop="userInfo.area" borderBottom @click="showPicker=true" >
				<u--input v-model="model.userInfo.area" disabled placeholder="请选择居住区域"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="详细地址" prop="userInfo.address" borderBottom  	>
				<u--input type='text' v-model="model.userInfo.address" border="none" placeholder='请输入详细地址'></u--input>
			</u-form-item>
		</u--form>
		<view class="btn-box">
			<view class="btn color-white fs-28 bg-43 border-radio-14" @click="submit" >保存</view>
			<view class="btn color-43 fs-28 bg-white border-radio-14 border" @click="del" v-if="id">删除</view>
		</view>
		<wmCityselect v-model="showPicker" @city-change="handleCityChange"></wmCityselect>
        <u-popup :show="imageShow">
            <view style="width: 100%;height: 100vh;">
                <cropper selWidth="660rpx" selHeight="660rpx" @upload="myUpload" :avatarSrc="imgurl"
                         avatarStyle="width:100vw;height:100vw;" ref="cropper" @fClose="fClose">
                </cropper>
            </view>
        </u-popup>
        <u-picker :show="relationShow" :columns="columns"  keyName="label" @cancel='relationShow = false' @confirm='confirm'></u-picker>
	</view>
</template>

<script>
import $baseUrl from "@/config/index.js"
	import {sickAdd,sickDetail,familyDel} from '@/api/family'
	import wmCityselect from '@/components/address/components/address/lib/cityselect.vue'
    import cropper from "@/components/lxiaoxiao-cropper/lxiaoxiao-cropper.vue";
	export default {
		components: {
			wmCityselect,cropper
		},
		data() {
			return {
				showPicker: false,
				model: {
					userInfo: {
						name: '',
						gender: '',
						contact: '',
						age: '',
						card: '',
						address:'',
						area:'',
						avatar:''
					},
				},
                imageShow:false,
				relationShow: false,
				columns: [
					[{
						label: '本人',
						id: 1
					}, {
						label: '配偶',
						id: 2
					}, {
						label: '父母',
						id: 3
					}, {
						label: '子女',
						id: 4
					}, {
						label: '兄弟姐妹',
						id: 5
					}]
				],
				sexlist: [{
						name: "女",
                        id: "0"
					},
					{
						name: "男",
                        id: "1"
					},
				],
                imgurl:'',
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.contact': {
						type: 'string',
						required: true,
						message: '请填写联系方式',
						trigger: ['blur', 'change']
					},
					'userInfo.avatar': {
						type: 'string',
						required: true,
						message: '请上传头像',
						trigger: ['blur', 'change']
					},
                    'userInfo.age': {
                        type: 'number',
                        required: true,
                        message: '请填写年龄',
                        trigger: ['blur', 'change']
                    },
                    'userInfo.card': {
                        type: 'string',
                        required: true,
                        message: '请填写身份证号',
                        trigger: ['blur', 'change']
                    },
					'userInfo.gender': {
						type: 'string',
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					'userInfo.relation': {
						type: 'string',
						required: true,
						message: '请选择关系',
						trigger: ['blur', 'change']
					},
					'userInfo.area': {
						type: 'string',
						required: true,
						message: '请选择居住区域',
						trigger: ['blur', 'change']
					},
					'userInfo.address': {
						type: 'string',
						required: true,
						message: '请填写详细地址',
						trigger: ['blur', 'change']
					},
				},
                id:''
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
        onLoad(e){
            this.id =e?.id||''
            if (e && e.id){
               this.getSickDetail(e.id)
            }
        },
		methods: {
            getSickDetail(id){
                sickDetail({
                    sick_id:id
                }).then(res => {
                   if (res.code == 1){
                       this.model.userInfo = res.data
                   }else {
                       uni.showToast({
                           title: res.msg,
                           icon:'none'
                       })
                   }
                })
            },
			del(){
				let that = this
				console.log(that.model.userInfo);
				uni.showModal({
					confirmText:'删除',
					showCancel:true,
					title:'提示',
					content:`确认删除家庭成员${that.model.userInfo.name}`,
					success(e) {
						if(e.confirm){
							familyDel({sick_id:that.id}).then(res=>{
								if(res.code == 1){
									uni.showToast({
										icon:'none',
										title:'删除成功'
									})
									setTimeout(()=>{
										uni.navigateBack()
									},2000)
								}
							})
						}
					}
				})
			},
            //上传返回图片
            myUpload(rsp) {
                const self = this;
                self.imgurl = rsp.path; //更新头像方式一
                uni.uploadFile({
                    url: $baseUrl.baseUrl + 'api/common/upload',
                    filePath: rsp.tempFilePath,
                    name: 'file',
                    header: {
                        'token': uni.getStorageSync('token'),
                    },
                    success: function(res) {

                        if (res.statusCode == 200) {
                            uni.showToast({
                                title: '上传成功',
                                icon: 'none'
                            });
                            console.log(JSON.parse(res.data).data.fullurl)
                            self.model.userInfo.avatar  = JSON.parse(res.data).data.fullurl
                            self.imageShow =false
                        } else {
                            uni.showToast({
                                title: '上传失败',
                                icon: 'none'
                            })
                        }
                    }
                })

            },
            goCropper() {
                this.imageShow=true
                this.imgurl =this.model.userInfo.avatar
                this.$nextTick(function() {
                    this.$refs.cropper.fSelect()
                })
            },
			handleCityChange(e) {
				this.model.userInfo.area = e.province.label + ' ' + e.city.label + ' ' + e.area.label;
			},
			groupChange(e) {
				console.log(typeof e);
                this.model.gender = e
                console.log( this.model.gender ,typeof  this.model.gender )
			},
			confirm(e){
				this.relationShow= false
				this.model.userInfo.relation = e.value[0].label
			},
            submit(){

                this.$refs.uForm.validate().then(res => {
                  if (this.id){
                      this.save()
                  }else {
                      this.add()
                  }
                }).catch(errors => {
                    console.log('校验失败')
                })

            },
            save(){
                console.log(this.model.userInfo)
            },
            add(){
                sickAdd(this.model.userInfo).then(res=>{
                    if (res.code ==1){
                        uni.showToast({
                            title: '添加成功',
                            icon: 'success',
                            duration: 2000
                        })
                        uni.navigateBack()
                    }else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none',
                            duration: 2000
                        })
                    }
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
	.btn-box {
		padding: 120rpx 0;
		.btn { 
			height: 90rpx;  
			line-height: 90rpx;
			text-align: center;
		}
		.border {
			border: 1px solid #43ABC4;
			margin-top: 30rpx;
		}
	}
    .avatar-box {
        width: 50rpx;
        height:50rpx;
        overflow: hidden;
        border-radius: 50%;
        image {
            width: 100%;
            height: 100%;
        }
    }
</style>